<template>
  <div class="main-content">
    <div class="left-main">
      <el-card class="left-calendar">
        <el-calendar v-model="value"></el-calendar>
      </el-card>
      <el-card class="left-card">
        <p class="title">我的待办</p>
        <div class="bottom-main">
          <p v-for="(item,index) in dateList" :key="index">
            <span :style="{background:item.color}"></span>
            <span style="width:100px">
              <el-tooltip placement="top" :disabled="item.pendTime.length<5">
                <template #content>
                  <span>{{item.pendTime}}</span>
                </template>
                <div class="iclass-text-ellipsis">{{item.pendTime}}</div>
              </el-tooltip>
              </span>
            <span style="width:100px">
              <el-tooltip placement="top" :disabled="item.scheduleTitle.length<5">
                <template #content>
                  <span>{{item.scheduleTitle}}</span>
                </template>
                <div class="iclass-text-ellipsis">{{item.scheduleTitle}}</div>
              </el-tooltip>
            </span>
          </p>
        </div>
      </el-card>
    </div>
    <el-card class="right-card">
      <TodayList @ok="getList"/>
    </el-card>
  </div>
</template>
<script>
import api from "@/api";
//分页
import Pagination from "@/components/Pagination/index.vue";
import TodayList from "./todayList.vue";
export default {
  components: { Pagination, TodayList },
  data() {
    return {
      value: new Date(),
      total: 0, //多少条
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scheduleStatus: "1"
      },
      dateList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**获取列表数据 */
    getList() {
      api.zfSchedule.list(this.queryParams).then(res => {
        if (res.code) {
          //设置列表数据
          this.dateList = res.rows;
          res.rows.map(item => {
            if (item.urgencyDegree == 0) {
              return (item.color = "#3DD4A7");
            } else if (item.urgencyDegree == 1) {
              return (item.color = "#FDDB78");
            } else {
              return (item.color = "#FA746B");
            }
          });
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err=>{
        this.$message.error(err.msg)
      });
    }
  }
};
</script>
<style lang="less" scoped>
:deep(.el-calendar__header){
  padding:12px 5px;

}
.el-calendar {
  text-align: center;
}
:deep(.el-calendar-day) {
  box-sizing: border-box;
  height: 35px;
  line-height: 1;
}
:deep(.el-calendar__body) {
  padding: 0 0 0 0;
}
.main-content {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  width: 100%;
  height: 100%;
  .left-main {
    width: 22%;
    height: 100%;
  }
  .left-calendar {
    width: 100%;
    height: 44%;
  }
  .left-card {
    width: 100%;
    // height: 46%;
    height: 400px;
    margin-top: 10px;
    .title {
      width: 100%;
      height: 30px;
      font-size: 17px;
      margin-top: 0px;
    }
    .bottom-main {
      padding: 5px 0;
      p {
        display: flex;
        justify-content: space-around;
        align-items: center;
        span:nth-child(1) {
          width: 12px;
          height: 12px;
        }
      }
    }
  }
  .right-card {
    width: 77%;
    height: 100%;
    // overflow-y: auto;
  }
}
.iclass-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>


